<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<title>募派</title>
	<link type="text/css" rel="stylesheet" href="index.css">
	<script type="text/javascript">

		window.onload = function() {
			var actImage = document.getElementById('actImage');
			var list = document.getElementById('list');
			var buttons = document.getElementById('buttons').getElementsByTagName('span');
			var prev = document.getElementById('prev');
			var next = document.getElementById('next');
			var index = 1;
			var len = 3;
			var moved = false;	//若图片正在移动，不能触发翻页功能
			var interval = 3000;
			var timer;

			//图片移动
			function move (offset){
				if (offset == 0) {
					return;
				}
				moved = true;
				var left = parseInt(list.style.left) + offset;
				var time = 400;
				var inteval = 10;
				var speed = offset/(time/inteval);

				function go(){
					if( (speed>0 && parseInt(list.style.left)<left) || (speed<0 && parseInt(list.style.left)>left) ){
						list.style.left = parseInt(list.style.left) + speed + 'px';
						setTimeout(go, inteval);
					}else{
						list.style.left = left + 'px';
						if(left > 0){
							list.style.left = -1300 * len + 'px';
						}
						if(left< (-1300 * len)){
							list.style.left = '0px';
						}
						moved = false;
					}			
				}
				
				go();
			}

			function showButton() {
				for (var i=0; i<buttons.length; i++) {
						buttons[i].className = '';
				}
				buttons[index-1].className = 'f-on';
			}

			//自动播放
			function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }
			
			next.onclick = function () {
                if (moved) {
                    return;
                }
                if (index == 4) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                move(-1300);
                showButton();
            }
            prev.onclick = function () {
                if (moved) {
                    return;
                }
                if (index == 1) {
                    index = 4;
                }
                else {
                    index -= 1;
                }
                move(1300);
                showButton();
            }

            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    if (moved) {
                        return;
                    }
                    if(this.className == 'f-on') {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute('index'));
                    var offset = -1300 * (myIndex - index);

                    move(offset);
                    index = myIndex;
                    showButton();
                }
            }

            actImage.onmouseover = stop;
            actImage.onmouseout = play;

            play();
		}
	</script>
</head>
<body class="g-doc">
 	<div class="g-hd">
		<h1 class="m-logo">
			<a href="" class="f-logo">募派LOGO</a>
		</h1>
			
		<div class="m-login-register">
			<div class="m-login">
				<a href="" class="f-login">登录</a>
			</div>
		 	<div class="m-register">
				<a href="" class="f-register">注册</a>
			</div>
		</div>
    </div>
	<div class="m-activity-display" id="actImage">

		<div class="u-act-list" id="list" style="left: 0px">
			<img src="images/1.jpg" alt="1" width="1300px" height="600px"/>
			<img src="images/2.jpg" alt="2" width="1300px" height="600px"/>
			<img src="images/3.jpg" alt="3" width="1300px" height="600px"/>
			<img src="images/4.jpg" alt="4" width="1300px" height="600px"/>
		</div>
		<div class="u-act-buttons" id="buttons">
			<span index="1" class="f-on"></span>
	        <span index="2"></span>
	        <span index="3"></span>
	        <span index="4"></span>
		</div>
		<a href="javascript:;" id="prev" class="u-arrow">&lt;</a>
    	<a href="javascript:;" id="next" class="u-arrow">&gt;</a>
		<!--
		<span><h1>活动展示区</h1></span>
		<button class="u-buy">我要购买</button>
		-->
	</div>
	<div class="m-longterm-display">
		<span><h1>长期物品展示区</h1></span>
	</div>
	<div class="g-ft">
		<span><h1>关于我们</h1></span>
	</div>
</body>
</html>